<template>
  <button 
    class="base-button" 
    :class="[type, size]"
    :disabled="disabled"
    @click="handleClick"
  >
    <slot></slot>
  </button>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'success', 'warning', 'error'].includes(value)
  },
  size: {
    type: String,
    default: 'normal',
    validator: (value) => ['small', 'normal', 'large'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

const handleClick = (e) => {
  emit('click', e)
}
</script>

<style lang="scss" scoped>
.base-button {
  border: none;
  border-radius: 8rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
  
  &.primary {
    background-color: #2979ff;
    color: #fff;
  }
  
  &.success {
    background-color: #19be6b;
    color: #fff;
  }
  
  &.warning {
    background-color: #ff9900;
    color: #fff;
  }
  
  &.error {
    background-color: #fa3534;
    color: #fff;
  }
  
  &.small {
    padding: 10rpx 20rpx;
    font-size: 24rpx;
  }
  
  &.large {
    padding: 30rpx 60rpx;
    font-size: 32rpx;
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
</style> 